<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/mescroll.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>公共充电站</title>
</head>

<body>
    <div id="app" class="flex flex_v " v-cloak>
        <div class="hide" :class="showApp?'showBox':''">
            <div class="tabcell flex_hm flex_hc">
                <div class="tabcellt flex1  flex_hm flex_hc" :class="tabstate==0?'active':''" @click="tabclick(0)">充电站详情</div>
                <div class="tabcellt flex1 flex_hm flex_hc" :class="tabstate==1?'active':''" @click="tabclick(1)">终端列表</div>
            </div>
        </div>

        <div class="h88"></div>
        <div class="content flex1 hide" :class="showApp?'showBox':''">
            <div class="tabDetail" v-if='tabstate==0'>
                <div class="chargingAddres flex_hm">
                    <div class="chargingAddres_icon"></div>
                    <div class="flex1 flex_hm flex_hc flex_v">
                        <div class="chargingAddres_name">{{chargeDetail.name}} <span>({{chargeDetail.distance}}米)</span></div>
                        <div class="chargingAddres_qu">{{chargeDetail.site}}</div>
                    </div>
                    <div class="chargingAddres_nav" @click="nav">
                        <div class="chargingAddres_navIcon"></div>
                        <div class="chargingAddres_navText">到这去</div>
                    </div>
                </div>
                <div class="chargingBody">
                    <div class="chargingBody_cell  flex_hm">
                        <div class="chargingBody_total flex_hm">
                            <span class="chargingBody_totalNum">总数</span>{{chargeDetail.all}}个
                        </div>
                        <div class="chargingBody_total flex_hm" v-if="chargeDetail.type==1||chargeDetail.type==3">
                            <span class="DcFree flex_hm ">直流空闲</span>{{chargeDetail.direct}}个
                        </div>
                        <div class="chargingBody_total flex_hm" v-if="chargeDetail.type==2||chargeDetail.type==3">
                            <span class="CoFree flex_hm ">交流空闲</span>{{chargeDetail.alternating}}个
                        </div>
                    </div>
                    <div class="chargingBody_cell  flex_hm ">
                        <div class="charge_nameIcon flex_hm flex_hc" v-if="chargeDetail.img"><img :src="chargeDetail.img" alt=""></div>
                        <div class="flex1 flex_hm  flex_v flex_altemsB">
                            <div class="charge_nameTit ellipsis1">{{chargeDetail.name}}</div>
                            <div class="flex_hm charge_nameTbo ">
                                <div class="charge_nameTime">营业时间{{chargeDetail.businessTime}}</div>
                                <div class="charge_nameHore" v-if="chargeDetail.isfloor==1">地上</div>
                                <div class="charge_nameHore" v-if="chargeDetail.isfloor==0">地下</div>
                            </div>

                        </div>
                    </div>
                    <div class="chargingBody_cell  flex_hm flex_v">
                        <div class="chargingBody_cell_bd">电费</div>
                        <div class="chargingBody_cell_hd flex_hm mt30">
                            <div class="DcPrice" v-if="chargeDetail.type==1||chargeDetail.type==3">{{chargeDetail.directElectric}}</div>
                            <div class="CoPrice" v-if="chargeDetail.type==2||chargeDetail.type==3">{{chargeDetail.alternatingElectric}}</div>
                        </div>
                    </div>
                    <div class="chargingBody_cell  flex_hm flex_v">
                        <div class="chargingBody_cell_bd">服务费</div>
                        <div class="chargingBody_cell_hd flex_hm stopCarPrice">
                            {{chargeDetail.serve}}

                        </div>
                    </div>
                    <div class="chargingBody_cell  flex_hm flex_v">
                        <div class="chargingBody_cell_bd">停车参考价</div>
                        <div class="chargingBody_cell_hd flex_hm stopCarPrice">
                            {{chargeDetail.park}}
                        </div>
                    </div>
                    <div class="chargingBody_cell  flex_hm flex_v">
                        <div class="chargingBody_cell_bd">支付方式</div>
                        <div class="chargingBody_cell_hd flex_hm mt30">
                            <div class="payWx flex_hm flex_hc flex_v">
                                <div class="payiocn"><img src="img/08ba06.png" alt=""></div>
                                <div class="paytxt">微信 </div>

                            </div>
                            <div class="payZfb flex_hm flex_hc flex_v">
                                <div class="payiocn"><img src="img/zhifubao.png" alt=""></div>
                                <div class="paytxt">支付宝</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>



            <div class="tabList" :class="tabstate==1?'':'hide'">
                <div class="mescroll" id="mescroll">
                    <div class="tabList_view ">
                        <div class="tabList_cell" v-for="(item , index) in list">
                            <div class="terminal flex_hm">
                                <div class="terminal_bd">
                                    <div class="terminal_state flex_hm" v-if="item.electricity==2">交流桩</div>
                                    <div class="terminal_state terminal_stateJl flex_hm" v-if="item.electricity==1">直流桩</div>
                                </div>
                                <div class="terminal_hd flex1">终端编号：{{item.code}}</div>
                            </div>
                            <div class="ParkingLot flex_hm">
                                <div class="ParkingLot_bd flex_hm flex_v">
                                    <div>
                                            <div class="ParkingLot_title">充电桩编号：</div>
                                            <div class="ParkingLot_number flex_hm flex_hc">{{item.num}}</div>
                                    </div>
                                    <div>
                                            <div class="ParkingLot_title">终 端 编 号 ：</div>
                                            <div class="ParkingLot_number flex_hm flex_hc">{{item.num}}</div>
                                    </div>
                                    
                                </div>
                                <div class="ParkingLot_hd flex1 flex_hm">
                                    <div class="ParkingLot_hd_info">
                                        <div class="ParkingLot_hd_infoTxt">接口标准：{{item.standard}}</div>
                                        <div class="ParkingLot_hd_infoTxt">额定功率：{{item.power}}</div>
                                        <div class="ParkingLot_hd_infoTxt">额定电压：{{item.voltage}}</div>
                                    </div>
                                    <div class="flex1">
                                        <div class="ParkingLot_hd_infoTxt">车辆SOC：--%</div>
                                        <div class="ParkingLot_hd_infoTxt">实时电流：--A</div>
                                        <div class="ParkingLot_hd_infoTxt">实时电压：--V</div>
                                    </div>
                                </div>
                            </div>
                            <div class="usageState flex_hm">
                                <div class="usageState_bd ">
                                    <div class="usageState_icon flex_hm flex_hc" v-if="item.status==1">使用中</div>
                                    <div class="usageState_icon usageState_iconkx flex_hm flex_hc" v-if="item.status==2">空闲</div>
                                </div>
                                <div class="usageState_info flex_hm flex_v">
                                    <div class="flex_hm">
                                        <div class="usageState_info_name">充电费用</div>
                                        <div class="usageState_info_price">{{item.rates}}</div>
                                    </div>
                                    <div class="flex_hm mt30">
                                        <div class="usageState_info_name">支付方式</div>
                                        <div class="usageState_infoWx">微信 </div>
                                        <div class="usageState_infoZfb">支付宝</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/mescroll.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/chargingPileDetail.js"></script>
    <!-- <script src="js/vconsole.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var vConsole = new VConsole();
    </script> -->
</body>

</html>